<template>
  <Modal
    v-model:open="visible"
    :maskClosable="false"
    :keyboard="false"
    destroyOnClose
    centered
    title="关联操作人"
    :width="700"
  >
    <ProTable
      ref="tableRef"
      :columns="columns"
      :fetch-list-api="fetchList"
      :row-selection="rowSelection"
      :auto-load="false"
      :height="500"
      row-key="id"
      hide-search
    >
      <template #toolbars>
        <div></div>
        <Space>
          <b-button icon="add" @click="onAdd">新增</b-button>
          <b-button
            icon="delete"
            @click="onDelete"
            :disabled="!selectKeys.length"
            >删除</b-button
          >
        </Space>
      </template>

      <template #operation="{ record }">
        <b-button icon="edit" type="link" @click="() => onEdit(record)"
          >编辑</b-button
        >
      </template>
    </ProTable>

    <template #footer>
      <Button @click="onClose">关闭</Button>
    </template>
  </Modal>

  <FormModal :items="items" />
</template>

<script setup lang="tsx">
import { computed, nextTick, ref, useTemplateRef } from 'vue';
import { Button, Modal, Space } from 'ant-design-vue';
import { ProTable, ProTableProps } from '@/components/ProTable';
import { useFormModal } from '@/hooks/formModal';
import {
  addDeptUser,
  deleteDeptUser,
  fetchDeptUser,
  updateDeptUser,
} from '@/api/system';

const fetchList = (params: Record<string, any>) => {
  return fetchDeptUser({ ...params, deptId: deptId.value });
};

const tableRef = useTemplateRef('tableRef');
const selectKeys = ref<number[]>([]);
const rowSelection = computed<ProTableProps['rowSelection']>(() => {
  return {
    columnWidth: 80,
    selectedRowKeys: selectKeys.value,
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});

const columns = computed(() => {
  return [
    {
      title: '操作人',
      dataIndex: 'userName',
      width: 200,
      hideInSearch: true,
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width: 80,
      hideInSearch: true,
    },
  ];
});

const visible = ref<boolean>(false);
const deptId = ref<number | undefined>();

const { open, FormModal } = useFormModal({
  size: 'small',
  column: 1,
});

const items = computed(() => [
  {
    type: 'input',
    field: 'userName',
    label: '操作人',
  },
]);

const onAdd = () => {
  open({
    title: '新增',
    serviceApi: async function (params: any): Promise<any> {
      await addDeptUser({ ...params, deptId: deptId.value });
      tableRef.value!.refresh();
    },
  });
};
const sleep = (cb) => {
  setTimeout(() => {
    cb();
  }, 500);
};

const onDelete = () => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选项？`,
    onOk: async () => {
      await deleteDeptUser(selectKeys.value);
      sleep(() => tableRef.value!.refresh());
      selectKeys.value = [];
    },
  });
};

const onEdit = (record: Record<string, any>) => {
  open({
    title: '编辑',
    modalType: 'edit',
    defaultValue: {
      ...record,
    },
    serviceApi: async function (params: any): Promise<any> {
      await updateDeptUser({ ...params, deptId: deptId.value });
      tableRef.value!.refresh();
    },
  });
};

const onClose = () => {
  visible.value = false;
};

defineExpose({
  open: (id: number) => {
    deptId.value = id;
    visible.value = true;
    nextTick(() => {
      tableRef.value!.refresh();
    });
  },
});
</script>
